<template>
	<view class="container p-bottom" v-if="order.order_id">
		<scroll-view scroll-y="true">
			<!-- 顶部状态栏 -->
			<view class="detail-header dis-flex flex-y-center">
				<view class="header-backdrop"><image src="/static/images/refund-bg.png"></image></view>
				<view class="header-state f-32 col-f">
					<text>{{ order.state_text }}</text>
				</view>
			</view>

			<!-- 快递配送：配送地址 -->
			<view v-if="order.delivery_type.value == deliverys.EXPRESS.value" class="flow-delivery">
				<view class="flow-delivery__detail dis-flex flex-y-center">
					<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
					<view class="detail-content flex-box">
						<view class="detail-content__title dis-flex">
							<text class="f-30">{{ order.address.name }}</text>
							<text class="detail-content__title-phone f-28">{{ order.address.phone }}</text>
						</view>
						<view class="detail-content__describe">
							<text class="col-7">{{ order.address.region.province }} {{ order.address.region.city }} {{ order.address.region.region }} {{ order.address.detail }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 上门自提：自提门店 -->
			<block v-if="order.delivery_type.value == deliverys.EXTRACT.value">
				<view class="m-top20 b-f">
					<view class="flow-delivery">
						<view class="flow-delivery__title m-top20"><text class="flow-delivery__title-text f-30">自提门店</text></view>
						<view class="flow-delivery__detail dis-flex flex-y-center" @tap="onTargetShop" :data-id="order.extract_shop.shop_id">
							<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
							<view class="detail-content flex-box">
								<view class="detail-content__title dis-flex">
									<text class="f-30">{{ order.extract_shop.shop_name }}</text>
								</view>
								<view class="detail-content__describe">
									<text class="col-7">{{ order.extract_shop.region.province }} {{ order.extract_shop.region.city }} {{ order.extract_shop.region.region }} {{ order.extract_shop.address }}</text>
								</view>
							</view>
							<view class="detail-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
						</view>
					</view>
				</view>
				<!-- 自提联系方式 -->
				<view v-if="order.extract.id" class="flow-extract-contact m-top20 b-f">
					<view class="contact-item dis-flex">
						<view class="item_label dis-flex flex-x-end flex-y-center"><text>联系人：</text></view>
						<view class="item_ipt flex-box dis-flex flex-y-center">
							<text>{{ order.extract.linkman }}</text>
						</view>
					</view>
					<view class="contact-item dis-flex">
						<view class="item_label dis-flex flex-x-end flex-y-center"><text>联系电话：</text></view>
						<view class="item_ipt flex-box dis-flex flex-y-center">
							<text>{{ order.extract.phone }}</text>
						</view>
					</view>
				</view>
			</block>

			<!-- 物流信息 -->
			<view class="flow-all-money b-f padding-box m-top20" v-if="order.delivery_type.value == deliverys.EXPRESS.value && order.delivery_status.value == 20">
				<view class="flow-all-list dis-flex"><text class="">物流信息</text></view>
				<view class="dis-flex">
					<view class="flex-box">
						<view class="dis-flex flow-all-list-cont">
							<text class="col-7">物流公司：{{ order.express.express_name }}</text>
						</view>
						<view class="dis-flex flow-all-list-cont">
							<text class="col-7" :selectable="true">物流单号：{{ order.express_no }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 标题：商品列表 -->
			<view class="flow-all-money b-f padding-box m-top20">
				<view class="flow-all-list dis-flex"><text class="">商品列表</text></view>
				<view class="order-cont dis-flex">
					<view class="order-num">
						<text :selectable="true">订单号：{{ order.order_no }}</text>
					</view>
					<view class="order-time">
						<text>{{ order.create_time }}</text>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="padding-box b-f">
				<view @tap="onTargetGoods" class="dis-flex flow-shopList b-f" :data-id="item.goods_id" v-for="(item, index) in order.goods" :key="index">
					<view class="flow-list-left"><image mode="scaleToFill" :src="item.image.file_path"></image></view>
					<view class="flow-list-right flex-box">
						<!-- 商品名称 -->
						<text class="f-30 col-3 twolist-hidden">{{ item.goods_name }}</text>
						<!-- 商品sku信息 -->
						<text class="f-24 col-7">{{ item.goods_attr }}</text>
						<!-- 商品数量和单价 -->
						<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
							<text class="small">×{{ item.total_num }}</text>
							<text class="flow-cont" :class="{ 'price-delete': item.is_user_grade }">￥{{ item.goods_price }}</text>
						</view>
						<!-- 会员折扣价 -->
						<view v-if="item.is_user_grade" class="grade-price">
							<text>会员折扣价：￥{{ item.grade_goods_price }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="select b-f">
				<view class="flow-num-box b-f">
					<text>共{{ order.goods.length }}件商品，合计:</text>
					<text class="flow-money col-m">￥{{ order.total_price }}</text>
				</view>
			</view>

			<!-- 买家留言 -->
			<view class="flow-all-money b-f m-top20" v-if="order.buyer_remark.length">
				<view class="dis-flex flow-all-list"><text class="flex-five">买家留言</text></view>
				<view class="dis-flex flow-all-list-cont" style="padding: 15rpx 0;">
					<text class="col-7">{{ order.buyer_remark }}</text>
				</view>
			</view>

			<!-- 订单金额 -->
			<view class="flow-all-money b-f padding-box m-top20">
				<view class="dis-flex flow-all-list"><text class="flex-five">订单金额</text></view>
				<view class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">商品金额：</text>
					<text class="flex-five col-m t-r">￥{{ order.total_price }}</text>
				</view>
				<view v-if="order.coupon_id > 0" class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">优惠券抵扣：</text>
					<text class="flex-five col-m t-r">-￥{{ order.coupon_money }}</text>
				</view>
				<view v-if="order.points_num > 0" class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">{{ setting.points_name }}抵扣：</text>
					<text class="flex-five col-m t-r">-￥{{ order.points_money }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">配送费用：</text>
					<text class="flex-five col-m t-r">+￥{{ order.express_price }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont" v-if="order.update_price.value != '0.00'">
					<text class="flex-five col-7">后台改价：</text>
					<text class="flex-five col-m t-r">{{ order.update_price.symbol }}￥{{ order.update_price.value }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">实付金额：</text>
					<text class="flex-five col-m t-r">￥{{ order.pay_price }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 操作栏 -->
		<view v-if="order.order_status.value != 20" class="flow-fixed-footer b-f">
			<!-- 订单核销 -->
			<view class="flow-btn h3" v-if="order.pay_status.value == 20 && order.delivery_type.value == deliverys.EXTRACT.value && order.delivery_status.value == 10"><view @tap="onSubmitExtract">确认核销</view></view>
		</view>
	</view>
</template>

<script>
// 枚举类：发货方式
const DeliveryTypeEnum = require('@/utils/enum/DeliveryType.js');
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	data() {
		return {
			// 当前页面参数
			options: {},
			// 配送方式
			deliverys: DeliveryTypeEnum,
			clerkModel: {},
			order: {},
			setting: {},
			curDelivery: 20
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		// 记录options
		this.options = options;
		// 获取订单详情
		this.getOrderDetail();
	},
	methods: {
		/**
		 * 获取订单详情
		 */
		getOrderDetail() {
			this.$get(this.$api.getShopOrderDetail, { order_id: this.options.oid, order_type: this.options.oty }, res => {
				this.clerkModel = res.data.clerkModel;
				this.order = res.data.order;
				this.setting = res.data.setting;
			});
		},
		/**
		 * 跳转到门店详情
		 */
		onTargetShop(e) {
			Route.navigateTo({
				url: '/pages/shop/detail/index?shop_id=' + e.currentTarget.dataset.id
			});
		},

		/**
		 * 确认核销
		 */
		onSubmitExtract() {
			uni.showModal({
				title: '提示',
				content: '确认核销该订单吗？',
				success: o => {
					if (o.confirm) {
						this.$post(
							this.$api.shopOrderExtract,
							{
								order_id: this.options.oid,
								order_type: this.options.oty
							},
							res => {
								Tools.showSuccess(res.msg, () => {
									this.getOrderDetail();
								});
							}
						);
					}
				}
			});
		}
	}
};
</script>

<style>
.order-cont {
	/* padding: 12rpx 0; */
	justify-content: space-between;
}
.order-cont .order-num text,
.order-cont .time {
	color: #888;
}
.order-cont .order-num text,
.order-cont .order-time text {
	color: #777;
	font-size: 26rpx;
}
.checkout-right-detail,
.checkout-left-detail {
	font-size: 30rpx;
	color: #333;
	line-height: 92rpx;
}
.btn-default {
	border-radius: 4px;
	border: 1rpx solid #ccc;
	padding: 6rpx 20rpx;
	font-size: 28rpx;
	color: #555;
} /* 会员价 */
.flow-shopList .flow-list-right .flow-cont.price-delete {
	font-size: 26rpx;
	color: #777;
	text-decoration: line-through;
}
.flow-shopList .grade-price {
	padding-top: 8rpx;
	font-size: 28rpx;
	color: #ff495e;
	text-align: right;
} /* 顶部状态栏 */
.detail-header {
	position: relative;
	width: 100%;
	height: 140rpx;
}
.detail-header .header-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.detail-header .header-backdrop image {
	display: block;
	width: 750rpx;
	height: 140rpx;
}
.header-state {
	padding: 0 50rpx;
	z-index: 3;
} /* 配送信息 */
.flow-delivery {
	background: #fff
		url('')
		bottom left repeat-x;
	background-size: 120rpx auto;
}
.flow-delivery__title {
	width: 702rpx;
	padding: 15rpx 0;
	margin: 0 auto;
	background: #fff;
	border-bottom: 1rpx solid #f1f1f1;
}
.flow-delivery__title-text {
	margin-right: 20rpx;
}
.flow-delivery__detail {
	padding: 30rpx;
}
.detail-content {
	padding: 0 20rpx;
}
.detail-content__title {
	margin-bottom: 6rpx;
}
.detail-content .detail-content__title-phone {
	margin-left: 10rpx;
}
.detail-content .detail-content__describe {
	font-size: 28rpx;
} /* 门店自提联系人 */
.flow-extract-contact {
	padding: 8rpx 24rpx;
	font-size: 28rpx;
	color: #444;
}
.flow-extract-contact .contact-item {
	padding: 12rpx 0;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}
.flow-extract-contact .contact-item:last-child {
	border-bottom: none;
}
.flow-extract-contact .item_label {
	margin-right: 26rpx;
	width: 150rpx;
}
</style>
